<template>
    <!-- 全局 -->
    <div class="loginpage">
        <!-- 头部样式====== -->
              <headJump title="网易严选"/>
           <!-- 登录页面样式 -->
        <div class="loginform" v-if="islean">
            <!-- 图片logo -->
            <div class="logoimg">
                <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" >
            </div>
            <!-- 账号验证 -->
            <div class="accountlogin">
                    <van-field
                     v-model="userName"
                    name="pattern"
                    placeholder="请输入手机号"
                    />
                    <!-- //分割线 -->
                    <div class="cutoff">
                        <van-divider
                        :style="{ color: '#A8A8A8', borderColor: '#A8A8A8', width: '9rem' }"
                        >
                        </van-divider>
                    </div>
                    <van-field
                    style="margin-top:-10px"
                
                    type="password"
                    v-model="password"
                     name="validator"
                    placeholder="请输入密码"
                    />
                       <!-- //分割线 -->
                    <div class="cutoff">
                        <van-divider
                        :style="{ color: '#A8A8A8', borderColor: '#A8A8A8', width: '9rem' }"
                        >
                        </van-divider>
                    </div>
                    <!-- 忘记密码---切换短信登录 -->
                    <div class="forgetpassword">
                        <!-- //忘记密码 -->
                        <div >
                            <a href="https://aq.reg.163.com/ydaq/welcome?module=offlinePasswordFind#/"> 忘记密码?</a>
                           
                        </div>
                        <!-- 注册账号区域 -->
                        <div @click="registered">
                            注册账号
                        </div>
                        <!-- 切换至短信登录 -->
                        <div>
                            短信快捷登录
                        </div>
                    </div>
                    <!-- 登录按钮 -->
                    <div style="margin: 16px 0 auto; width:9rem">
                    <van-button size="large" color='red'  native-type="submit" @click="gotologin">登录</van-button>
                    </div>
      
            </div>
            <!-- 其他方式登录 -->
            <div class="switchlogin">
                 <span @click="switchlg">其他登录方式</span>
                 <van-icon name="arrow" />
            </div>
        </div>  
        <!-- 注册页面组件 -->
        <regisTered v-else/>
    </div>  
</template>

<script>
import {settoken} from '@/utils/auth'
import {loginRegister} from '@/axios/index'
import regisTered from './registered/index.vue'
import { Dialog } from 'vant'
export default {
  name:'loginPage',
  components:{
    regisTered,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      islean:1 , 
      userName: '',
      password: '', 
    }
  },  
  mounted(){
    this.$bus.$on('tologin',(v)=>{
      this.islean = v
    })
  },
  methods: {
    //切换至其他登录方式界面
    switchlg(){
      this.$bus.$emit('switchlgin',1)
    },
    //提示框
    gogogogo(v){
      Dialog.alert({
        message: `${v}`,
      }).then(() => {
              
      })
    },
    //跳转至注册页面
    registered(){
      this.islean = 0
    },
    //登录
    async gotologin(){
      //  this.$store.dispatch
      let {userName,password} = this
      if( userName && password ){
        let result = await loginRegister({userName,password})
        if(result.code === 200 ){
          settoken(result.data.token)
          this.$store.dispatch('getinfo') 
          Dialog.alert({
            message: '登陆成功',
          }).then(() => {
            this.$bus.$router.push('/')
          })
        }else{
          this.gogogogo('账号或密码有误')
        }
      }else{
        this.gogogogo('账号或密码不能为空')
      }
    
    }
  },
  
  
}
</script>

<style lang="less" scoped>
.loginpage{
  //登录页面样式
  .loginform{
      margin-top: 25px;
      //logo
      .logoimg{
          text-align: center;
          img{
              width: 3.5rem;
          }
      }
      //账号密码输入框
      .accountlogin{
          margin-top: 70px;
          margin-left: 20px;
          .cutoff{
              
              background-color: aqua;
              margin-top: -20px;
          }
          .forgetpassword{
              display: flex;
              font-size: 0.38rem;
              color: rgb(121, 121, 121);
              justify-content: space-between;
              padding: 0 15px;
          }
      }
      .switchlogin{
          text-align: center;
          margin-top: 70px;
          font-size: 16px;
          color: rgb(184, 184, 184);
          span{
              font-size: 14px;
               color: rgb(51, 48, 48);
          }
      }
    
  }
}
</style>